<template>
  <div class="home">
    <h1>{{$t('message.hello1')}}</h1>
    <h2>{{$t('message.hello2')}}</h2>
    <p>{{$t('message.hello3')}}</p>
    <el-switch
      class="demo"
      @change="changeStatus($event)"
      v-model="value1"
      active-text="英"
      inactive-text="中"
      active-color="#13ce66"
      inactive-color="#ff4949"
    ></el-switch>
  </div>
</template>

<script>

export default {
  name: "home",
  data() {
    return {
      value1: "0"
    };
  },
  methods: {
    changeStatus: function($event) {
      console.log($event);
      this.$i18n.locale = $event ? "en" : "cn";
    }
  },
  mounted() {},
  watch: {}
};
</script>
<style>
.demo .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
/*打开时文字位置设置*/
.demo .el-switch__label--right {
  z-index: 1;
  right: -3px;
}
/*关闭时文字位置设置*/
.demo .el-switch__label--left {
  z-index: 1;
  left: 20px;
}
/*显示文字*/
.demo .el-switch__label.is-active {
  display: block;
  color: #fff;
}
.demo.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 40px !important;
}
</style>
